<template>
  <div style="overflow:hidden;width:100%;height:853px;background-repeat:no-repeat;background-size:100% 100%">
    <!-- <el-button class="filter-item" type="primary" round size="mini" @click="copy">复制我的代理链接</el-button> -->
    <div style="width:100%;height:30px"></div>
    <div v-if="proxy>2">
      <div class="get-botton" @click="getCopy">生成我的分享链接</div>
      <div class="get-botton" @click="copyRefer"><span style="padding-left:10px;padding-right:10px;">{{referCode}}</span> 复制我的爱联超市推荐码</div>
    </div>
    <div v-if="proxy<3">
      <!-- <div class="get-botton"></div> -->
      <div class="get-botton" @click="copyRefer"><span style="padding-left:10px;padding-right:10px">{{referCode}}</span> 复制我的爱联超市推荐码</div>
    </div>
    <el-dialog :visible.sync="disVisable" :modal-append-to-body='false'>
      <div style="color:red;font-size:20px;margin-bottom:10px">机构用户如果要自己访问，请先退出登陆！</div>
      <div class="my-link">{{value}}</div>
      <div class="copy-botton" @click="copy">复制我的代理链接</div>
    </el-dialog>

    <!-- 合同 -->
    <el-dialog class="loginForm" :visible.sync="dialogVisible" :modal-append-to-body='false'>
      <div v-for="item in picture" :key="item.id">
        <img :src="item" style="width:100%;" />
      </div>
    </el-dialog>

    <!-- 提交审核材料 -->
    <el-dialog :visible.sync="editVisable" :modal-append-to-body='false'>
      <div class="regist">
        <div class="dataForm-title">升级/续费“{{levelName}}”,完善机构信息进行审核</div>
        <!-- <el-alert title="审核意见" :description="dataForm.checkWord" type="warning" :closable="false" show-icon style="margin-bottom:10px;"></el-alert> -->
        <el-form ref="dataForm" :rules="rules" :model="dataForm" label-position="right" label-width="100px">
          <el-form-item label="机构名称" prop="name">
            <el-input v-model="dataForm.name" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="机构简介" prop="nickName">
            <el-input v-model="dataForm.nickName"></el-input>
          </el-form-item>
          <el-form-item label="机构分类" prop="mcategoryId">
            <el-select v-model="dataForm.mcategoryId">
              <el-option v-for="item in mcategory" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区域地址">
            <el-select v-model="dataForm.provinceId" placeholder="省" @change="provinceChange">
              <el-option v-for="item in provinces" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
            <el-select v-model="dataForm.cityId" placeholder="市" @change="cityChange">
              <el-option v-for="item in cities" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
            <el-select v-model="dataForm.areaId" placeholder="区" @change="areaChange">
              <el-option v-for="item in areas" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
            <el-select v-show="false" v-model="dataForm.areaId" placeholder="s" @change="areasChange">
              <el-option v-for="item in areass" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="具体位置" prop="address">
            <el-input v-model="dataForm.address"></el-input>
          </el-form-item>
          <el-form-item label="法人" prop="legalPerson">
            <el-input v-model="dataForm.legalPerson" :disabled="true">></el-input>
          </el-form-item>
          <el-form-item label="联系号码" prop="telephone">
            <el-input v-model="dataForm.telephone" :disabled="true">></el-input>
          </el-form-item>
          <el-form-item label="重新上传资质" prop="certification">
            <el-upload :action='uploadPaths' :limit='5' multiple accept=".jpg,.jpeg,.png,.gif" :file-list="galleryFileList" list-type="picture-card" :on-exceed='uploadOverrun' :on-success="handleGalleryUrl" :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <!-- <el-upload class="certification-uploader" :action='uploadPaths' :file-list="galleryFileList" list-type="picture-card" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif" :on-exceed='uploadOverrun' :on-success="handleGalleryUrl" :on-remove="handleRemove">
              <img v-if="dataForm.certification" :src="dataForm.certification" class="certification">
              <i v-else class="el-icon-plus certification-uploader-icon"></i>
            </el-upload> -->
          </el-form-item>
          <el-form-item prop="checked" style="width: 450px;">
            <el-checkbox label="我已阅读，同意并遵守爱联商圈合同" v-model="checked"></el-checkbox>
            <div class="contract" @click="getContract">查看详情</div>
          </el-form-item>
          <el-alert title="审核提示" description="当前仅支持支付宝！！审核需要一定时间，期间您将无法使用此系统！！审核状态可以在登陆页面查询，审核成功后会发送短信通知！！" type="warning" :closable="false" show-icon style="margin-bottom:10px;"></el-alert>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" style="margin-left:25%;width:50%;" @click="createData" :disabled="this.checked===false">缴费并提交信息进行审核</el-button>
        </div>
      </div>
    </el-dialog>

    <div class="login-center">
      <div v-for="(item) in items" :key="item.id">
        <div class="login-center-type">
          <ul class="type-item">
            <li class="first-item">
              <div class="item-name">
                  <div class="name">{{item.name}}</div>
                  <img class="item-icon" :src="item.iconUrl">
              </div>
              <div class="item-price">{{item.fee}}<span style="font-size:18px;font-weight:400" v-if="item.fee != 19800 && item.fee != 198000">元/年</span><span style="font-size:18px;font-weight:400" v-if="item.fee == 19800">元/3年</span><span style="font-size:18px;font-weight:400" v-if="item.fee == 198000">元/终生</span></div>
              <div class="wi">开通爱联商圈会员，享受优质模式体系</div>
              <div class="english">Ai Lian Business Circle Distinguished Member</div>
              <div class="item-botton" @click="confirmItem(item.id,item.name)">升级/续费{{item.name}}</div>
            </li>
          </ul>
        </div>
      </div>
      <el-dialog title="支付宝支付" :visible.sync="alipayDialogStatus" :close-on-click-modal=false width="250px" :before-close="cancelAliPay">
        <vue-qr :text="aliQrConfig.value" :size="200" :margin="0"></vue-qr>
        <h3 style="color :red">注意：信息提交成功！请在十五分钟内完成支付！支付成功后系统会自动关闭二维码！</h3>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { info } from '@/api/dashboard'
import { listProxyCategory } from '@/api/login'
import { timeWarn } from '@/api/mechanism'
import store from '@/store'
import CountTo from 'vue-count-to'
import { renewchanismProxy, queryalipaystatus, queryPicurl } from '@/api/proxy'
import { getAES } from '@/utils/index'
import VueQr from 'vue-qr'
import { queryMechanismMeg, updateMechanismProxy, getLevel } from '@/api/mechanism'
import { listAllMCategory } from '@/api/login'
import { listSubRegion, listAddress } from '@/api/region'
import { uploadPaths } from '@/api/storage'
import { mapGetters } from 'vuex'

export default {
  components: {
    CountTo,
    VueQr
  },
  computed: {
    ...mapGetters(['sidebar', 'name', 'mechanismId', 'mechanismName', 'avatar'])
  },
  data() {
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号码'))
      } else {
        var reg = /^1[3456789]\d{9}$/
        if (!reg.test(value)) {
          callback(new Error('请输入有效的手机号码'))
        }
      }
      callback()
    }
    return {
      picture: [],
      uploadPaths,
      referCode: store.getters.referCode,
      proxy: undefined,
      galleryFileList: [],
      items: '',
      disVisable: false,
      editVisable: false,
      dialogVisible: false,
      checked: false,
      areass: {},
      value: '',
      warndays: undefined,
      payMessage: undefined,
      alpay: '',
      checkStatus: undefined,
      wechat: '',
      successsValue: '',
      recordSn: {
        recordSn: ''
      },
      aliQrConfig: {
        value: ''
      },
      regionsId: {
        id: 0
      },
      mcategory: [],
      provinces: {},
      cities: {},
      areas: {},
      rules: {
        name: [{ required: true, message: '请填写机构名称', trigger: 'blur' }],
        mcategoryId: [{ required: true, message: '请选择机构分类', trigger: 'blur' }],
        provinceId: [{ required: true, message: '请选择省市', trigger: 'blur' }],
        cityId: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        areaId: [{ required: true, message: '请选择区域', trigger: 'blur' }],
        address: [{ required: true, message: '请填写具体位置', trigger: 'blur' }],
        telephone: [
          { required: true, message: '请填写联系手机号码', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        legalPerson: [{ required: true, message: '请填写法人姓名', trigger: 'blur' }]
      },
      alipayDialogStatus: false,
      level: undefined,
      levelName: undefined,
      dataForm: {
        id: undefined,
        name: undefined,
        nickName: undefined,
        mcategoryId: undefined,
        mechanismType: undefined,
        address: undefined,
        legalPerson: undefined,
        telephone: undefined,
        qualifications: [],
        integralAmountAll: undefined,
        provinceId: undefined,
        cityId: undefined,
        areaId: undefined,
        street: undefined,
        longitude: undefined,
        latitude: undefined,
        affiliation: undefined,
        level: undefined,
        recordSn: undefined,
        certification: []
      }
    }
  },
  methods: {
    getLevel() {
      getLevel({ mid: this.mechanismId })
        .then(res => {
          console.log(res.data.data.Proxy.id)
          if (res.data.data.Proxy !== '') {
            this.proxy = res.data.data.Proxy.id
            console.log(this.proxy)
          }
        })
        // .catch(() => {
        //   this.proxy = undefined
        // })
    },
    confirmItem(level, name) {
      if (level === 1) {
        this.$confirm('体验用户暂不开放', '提示', {
          confirmButtonText: '确定',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
      }
      if (level === 4) {
        this.$confirm('开通事业部请联系爱能即可', '提示', {
          confirmButtonText: '确定',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
      }
      if (level === 2 || level === 3) {
        this.$confirm('您选择成为 “' + name + '” ，请确认后点击继续', '提示', {
          confirmButtonText: '继续',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.editVisable = true
          this.getPicurl(level)
          this.init()
          this.level = level
          this.levelName = name
        })
      }
    },
    getPicurl(pictureId) {
      console.log(pictureId)
      queryPicurl({ pictureId: getAES(pictureId.toString()) }).then(response => {
        this.picture = response.data.data.introdecPicture
      })
    },
    queryalipaystatus() {
      if (this.recordSn.recordSn !== '' && this.alipayDialogStatus === true) {
        queryalipaystatus(this.recordSn)
          .then(response => {
            var orderStatus = response.data.data.orderStatus
            if (orderStatus === 'SUCCESS') {
              this.timeOut = ''
              this.aliQrConfig.value = ''
              this.dialogChargeFormVisible = false
              this.alipayDialogStatus = false
              this.$alert('充值成功,您的机构已成功升级为' + this.levelName, '成功', {
                confirmButtonText: '确定'
              })
            } else if (orderStatus === 'WAIT_PAY') {
              this.timeOut = setTimeout(() => {
                this.queryalipaystatus()
              }, 3000)
            }
          })
          .catch(() => {
            this.timeOut = ''
            this.dialogChargeFormVisible = false
            this.alipayDialogStatus = false
            this.getList()
            this.$notify({
              title: '错误',
              message: '充值失败',
              type: 'error',
              duration: 1000
            })
          })
      }
    },
    init() {
      // 拉取机构类型
      listAllMCategory()
        .then(response => {
          this.mcategory = response.data.data.mcategory
          this.categorylist = response.data.data.brandList
          for (let i = 0; i < this.categorylist.length; i++) {
            this.cList[this.categorylist[i].value] = this.categorylist[i].label
          }
        })
        .catch(() => {
          this.mcategory = []
        })
      this.dialogStatus = 'create'
      this.getMechanism()
    },
    getMechanism() {
      queryMechanismMeg({ mid: this.mechanismId }).then(response => {
        this.dataForm = response.data.data.mechanism
        this.dataForm.certification = []
        this.getProvinces()
      })
    },
    provinceChange(val) {
      if (val === undefined) {
        return
      }
      this.cities = {}
      this.dataForm.cityId = undefined
      this.areas = {}
      this.dataForm.areaId = undefined
      listSubRegion({ id: val }).then(response => {
        this.cities = response.data.data
      })
    },
    cityChange(val) {
      if (val === undefined) {
        return
      }
      this.areas = {}
      this.dataForm.areaId = undefined
      listSubRegion({ id: val }).then(response => {
        this.areas = response.data.data
      })
    },
    areaChange(val) {
      if (val === undefined) {
        return
      }
      this.areass = {}
      this.dataForm.street = undefined
    },
    areasChange(val) {},
    uploadOverrun: function() {
      this.$message({
        type: 'error',
        message: '上传文件个数超出限制!最多上传5张图片!'
      })
    },
    handleGalleryUrl(response, file, fileList) {
      if (response.errno === 0) {
        this.dataForm.certification.push(response.data.url)
      }
    },
    handleRemove: function(file, fileList) {
      for (var i = 0; i < this.dataForm.qualifications.length; i++) {
        // 这里存在两种情况
        // 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.data.url
        //    此时的file.url虽然存在，但是是本机地址，而不是远程地址。
        // 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
        var url
        if (file.response === undefined) {
          url = file.url
        } else {
          url = file.response.data.url
        }

        if (this.dataForm.qualifications[i] === url) {
          this.dataForm.qualifications.splice(i, 1)
        }
      }
    },
    createData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          if (this.dataForm.certification.length > 0) {
            if (!isNaN(this.dataForm.provinceId) && !isNaN(this.dataForm.cityId) && !isNaN(this.dataForm.areaId)) {
              this.recordSn.recordSn = this.createRecordSn()
              this.dataForm.recordSn = this.recordSn.recordSn
              updateMechanismProxy(this.dataForm).then(response => {
                if (response.data.data.message === 'ok') {
                  this.editVisable = false
                  this.successsValue = name
                  const data = {
                    level: getAES(this.level.toString()),
                    recordSn: this.recordSn.recordSn,
                    orgId: store.getters.mechanismId
                  }
                  renewchanismProxy(data).then(response => {
                    var data = response.data
                    if (data.errno === 0) {
                      var codeUrl = data.data
                      this.aliQrConfig.value = codeUrl
                      this.alipayDialogStatus = true
                      // this.$notify({
                      //   title: '提示',
                      //   message: '信息提交成功，请在十五分钟内完成付款！！',
                      //   type: 'warning',
                      //   duration: 10000
                      // })
                      this.timeOut = setTimeout(() => {
                        this.queryalipaystatus()
                      }, 5000)
                    }
                  })
                } else {
                  this.$alert('提交失败，请重试！', {
                    confirmButtonText: '确定',
                    type: 'warning'
                  })
                }
              })
            } else {
              this.$alert('区域地址请填写完整！！', {
                confirmButtonText: '确定',
                type: 'warning'
              })
            }
          } else {
            this.$alert('请重新上传资质图片！', {
              confirmButtonText: '确定',
              type: 'warning'
            })
          }
        }
      })
    },
    cancelAliPay(done) {
      this.$notify({
        title: '提示',
        message: '支付宝正在支付中，不允许关闭！强行关闭会造成积分充值失败！支付成功后，二维码自动关闭！',
        type: 'warning',
        duration: 8000
      })
    },
    getProvinces() {
      if (this.regionsId.id !== 0) {
        listAddress({ pid: this.regionsId.id, cid: this.dataForm.provinceId, aid: this.dataForm.cityId }).then(
          response => {
            this.provinces = response.data.data.plist
            this.cities = response.data.data.clist
            this.areas = response.data.data.alist
          }
        )
      } else {
        listSubRegion(this.regionsId).then(response => {
          this.provinces = response.data.data
        })
      }
    },
    createRecordSn() {
      var date = new Date()
      var Y = date.getFullYear()
      var M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      var ss = date.getMilliseconds()
      if (ss < 10) {
        ss = '00' + ss
      } else if (ss < 100) {
        ss = '0' + ss
      }
      // var result = Y.to + M + D + h + m + s + ss;
      var result =
        Y.toString() + M.toString() + D.toString() + h.toString() + m.toString() + s.toString() + ss.toString()
      console.log('result = ' + result)
      return result
    },
    copy() {
      const input = document.createElement('input')
      const values = 'localhost:9999/#/login?id=' + getAES(store.getters.mechanismId.toString())
      document.body.appendChild(input)
      input.setAttribute('value', values)
      input.select()
      if (document.execCommand('copy')) {
        document.execCommand('copy')
      }
      document.body.removeChild(input)
      this.$notify({
        title: '成功',
        message: '复制成功',
        type: 'success',
        duration: 1000
      })
    },
    copyRefer() {
      const input = document.createElement('input')
      const values = this.referCode
      document.body.appendChild(input)
      input.setAttribute('value', values)
      input.select()
      if (document.execCommand('copy')) {
        document.execCommand('copy')
      }
      document.body.removeChild(input)
      this.$notify({
        title: '成功',
        message: '复制成功',
        type: 'success',
        duration: 1000
      })
    },
    getList() {
      listProxyCategory().then(res => {
        this.items = res.data.data.items
      })
    },
    getContract() {
      this.dialogVisible = true
    },
    getCopy() {
      if (this.alpay === undefined || this.alpay.length === 0) {
        this.$alert('请完善机构信息的支付宝合作伙伴身份(PID)！', {
          confirmButtonText: '知道了',
          type: 'warning'
        })
        this.$router.push({ path: '/mechanism/mechanism' })
      } else {
        this.value = 'https://mall.aimanrenjian.net/mall/#/login?id=' + getAES(store.getters.mechanismId.toString())
        this.disVisable = true
      }
    },
    getTimeWarn() {
      timeWarn().then(res => {
        this.warndays = res.data.data.warnDays
        this.alpay = res.data.data.alpay
        this.checkStatus = res.data.data.checkStatus
        if (this.warndays === '') {
          this.$alert('您机构信息不完整，请联系爱能工作人员维护机构到期时间！', {
            confirmButtonText: '知道了',
            type: 'warning'
          })
        } else if (
          this.warndays >= 0 &&
          this.warndays <= 10 &&
          (this.checkStatus === 0 || this.checkStatus === 2 || this.checkStatus === 4)
        ) {
          this.$alert('您的机构剩余时间不足10天，剩余' + this.warndays + '天，请及时续费或者充值！', {
            confirmButtonText: '知道了',
            type: 'warning'
          })
        } else if (this.warndays < 0 || (this.checkStatus !== 0 && this.checkStatus !== 2 && this.checkStatus !== 4)) {
          this.$confirm(
            '您的机构已经过期，请进行升级/续费！否则无法继续使用此系统！如已经进行过升级/续费操作，请耐心等待工作人员进行审核，可返回登陆页面查询审核结果',
            '提示',
            {
              confirmButtonText: '进行续费',
              cancelButtonText: '退出登陆',
              type: 'warning'
            }
          )
            .then(() => {
              this.$router.push({ path: '/upgrade' })
            })
            .catch(() => {
              this.$store.dispatch('LogOut').then(() => {
                location.reload() // In order to re-instantiate the vue-router object to avoid bugs
              })
            })
        }
      })
    }
  },
  created() {
    info(this.listQuery).then(response => {})
    this.getList()
    this.getTimeWarn()
    this.getLevel()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .filter-item {
    align-self: center;
  }
  .card-panel-col {
    margin-bottom: 32px;
  }
  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }
      .icon-people {
        background: #40c9c6;
      }
      .icon-message {
        background: #36a3f7;
      }
      .icon-money {
        background: #f4516c;
      }
      .icon-shoppingCard {
        background: #34bfa3;
      }
    }
    .icon-people {
      color: #40c9c6;
    }
    .icon-message {
      color: #36a3f7;
    }
    .icon-money {
      color: #f4516c;
    }
    .icon-shoppingCard {
      color: #34bfa3;
    }
    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }
    .card-panel-icon {
      float: left;
      font-size: 48px;
    }
    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;
      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.login-center {
  width: 100%;
  height: 90%;
  background-size: 180% 100%;
  background-repeat: no-repeat;
}
.login-center-type {
  float: left;
  width: 25%;
  height: 100%;
  .type-item {
    width: 90%;
    height: 220px;
    margin-top: 50%;
    margin-left: 5%;
    background: -webkit-linear-gradient(left, rgba(200,182,146,0.9) , rgba(187,156,109,0.9)); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, rgba(200,182,146,0.9) , rgba(187,156,109,0.9)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, rgba(200,182,146,0.9) , rgba(187,156,109,0.9)); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, rgba(200,182,146,0.9) , rgba(187,156,109,0.9)); /* 标准的语法 */
    // box-shadow:1px 1px 5px white;
    border-radius: 10px;
    .first-item {
      font-size: 20px;
      margin: auto;
      text-align: center;
      padding-top: 30px;
      border-radius: 10px;
      .item-name {
        height: 30px;
        line-height: 30px;
        display: inline-block;
        vertical-align: middle;
        width:100%;
        // color: #ca963b;
        font-weight: 500;
        font-size: 25px;
      }
      .item-botton {
          cursor: pointer;
          width: 200px;
          height: 40px;
          font-size: 12px;
          line-height: 40px;
          text-align: center;
          border-radius: 23px;
          /* margin-top: 20px; */
          margin: 20px auto;
          margin-top: 20px;
          border: 1px solid #f9d681;
          color: #f9d681;
          margin-top: 10px;
          background-color: #706163;
      }
    }
  }
}
.english{
  color:rgb(148,133,101);
  margin-left:10px;
  font-size:16px;
}
.name{
  text-align: left;
  margin-left:36px;
}
.get-botton {
  cursor: pointer;
  width: 250px;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  border-radius: 15px;
  margin: 15px auto;
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}
.regist {
  width: 80%;
  height: 80%;
  margin: auto;
}
.dataForm-title {
  font-size: 26px;
  // font-weight: 400;
  color: #000;
  margin: 40px auto 40px auto;
  text-align: center;
  font-weight: bold;
}
.contract {
  margin-left: 20px;
  color: blue;
  cursor: pointer;
  float: right;
}
.contract-dialog {
  white-space: pre-wrap;
  word-wrap: break-word;
  width: 80%;
  margin: auto;
  margin-top: 20px;
  line-height: 25px;
  font-size: 14px;
}
.copy-botton {
  cursor: pointer;
  // width: 150px;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  border-radius: 15px;
  margin: auto;
  margin-top: 5px;
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
  margin-right: 30px;
}
.item-price {
  font-size: 30px;
  font-weight: 500;
  color:black;
  width: 100%;
  text-align: left;
  margin-left:36px;
  letter-spacing: 2px;
  margin-top: 10px;
  margin-bottom:4px;
}
.item-warn {
  white-space: pre-wrap;
  word-wrap: break-word;
  width: 80%;
  margin: auto;
  margin-top: 20px;
  line-height: 25px;
  font-size: 14px;
}
.item-icon {
    float: right;
    width: 50px;
    // height: 50px;
    margin-right: 10px;
    margin-top: -20px;
}
.my-link {
  // float: left;
  width: 600px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.wi{
  display: none;
  color:rgb(237,223,205);
  font-size:16px;
  margin-right:85px;
}
</style>
